'use client';

import React, { useState } from 'react';
import { Modal, Form, Input, message } from 'antd';
import { BaseOverlayProps } from '@/hooks/useOverlayManager';

interface TeamBalanceRechargeModalProps extends BaseOverlayProps {
  teamId: string;
  teamName: string;
  currentBalance: number;
  onSuccess?: () => void;
}

const TeamBalanceRechargeModal: React.FC<TeamBalanceRechargeModalProps> = ({
  teamId,
  teamName,
  currentBalance,
  onSuccess,
  onClose,
  open,
}) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    try {
      setLoading(true);
      const values = await form.validateFields();
      
      // TODO: 调用API进行充值
      console.log('充值金额:', values.amount, '团队ID:', teamId);
      
      message.success('充值成功');
      form.resetFields();
      onSuccess?.();
      onClose?.();
    } catch (error) {
      console.error('充值失败:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleCancel = () => {
    form.resetFields();
    onClose?.();
  };

  return (
    <Modal
      title="余额充值"
      open={open}
      onOk={handleSubmit}
      onCancel={handleCancel}
      confirmLoading={loading}
      destroyOnClose
      maskClosable={false}
    >
      <div className="mb-4">
        <div className="p-3 bg-gray-50 rounded">
          <p className="text-gray-500 mb-1">当前团队: {teamName}</p>
          <p className="text-gray-500">当前余额: ¥{currentBalance.toFixed(2)}</p>
        </div>
      </div>

      <Form
        form={form}
        layout="vertical"
        preserve={false}
      >
        <Form.Item
          label="充值金额"
          name="amount"
          rules={[
            { required: true, message: '请输入充值金额' },
            { type: 'number', min: 0.01, message: '充值金额必须大于0' },
            { type: 'number', max: 1000000, message: '单次充值金额不能超过100万' },
          ]}
        >
          <Input
            type="number"
            placeholder="请输入充值金额"
            suffix="元"
            min={0.01}
            max={1000000}
          />
        </Form.Item>
      </Form>
    </Modal>
  );
};

TeamBalanceRechargeModal.displayName = 'TeamBalanceRechargeModal';

export default TeamBalanceRechargeModal; 